
// 浅色主题
%dream-purple {
	$deg: 45deg;
	$color-dream-purple-a: #ec008c;
	$color-dream-purple-b: #923bdc;
	
	
    $color-a: #f7f7f7;
    $color-b: #ffffff;
    $color-c: #1c2024;
    $color-d: #ffd250;
	
	%gradual-bg {
		color: $color-b;
	    background-image: repeating-linear-gradient($deg, $color-dream-purple-a, $color-dream-purple-b);
	}
	%gray-bg{
		background-image: repeating-linear-gradient($deg, $color-a, $color-a + 10);
	}
	%gradual-text{
	    background: linear-gradient($deg, $color-dream-purple-a, $color-dream-purple-b);
	    -webkit-background-clip:text;
	    color: transparent;
	}
	
	background-color: $color-a;
	color: $color-c;
	&:after {
		content: '';
	    position: fixed;
	    height: 100vh;
	    width: 100%;
	    z-index: -1;
		background-color: $color-a;
	}
	&.login {
		background-color: $color-b;
		.u-back-wrap {
			color: $color-c;
		}
		
	}
	&.page {
		color: $color-c;
		&:after {
			background-color: $color-b;
		}
		background-color: $color-b;
	}
	// 按钮默认
	.m-button{
		color: $color-c;
		background-color: $color-b;
	}
	
	// 主要
	.main-bg{
		color: $color-b;
		@extend %gradual-bg;
		// background-color: $color-d
	}
	// 浅色背景
	.light-bg{
		color: $color-c;
		background-color: $color-b - 10;
	}
	// 评论区域背景
	.comment-bg{
		background-color: $color-a;
	}
	// 标题背景
	.title-bg {
		@extend %gradual-bg;
	    // background-color: $color-b;
	}
	// 标题下方间隔线
	.title-bg.u-border-bottom:after {
	    border-color: $color-a;
	}
	// 模型背景
	.cu-modal {
	    .cu-dialog {
	        color: $color-c;
	        background-color: $color-b;
	    }
	}

	//加载中的modal
	.my-load {
	    .cu-load {
	        background-color: $color-b;
	        .text {
	            color: $color-c;
	        }
	    }
	    .load-modal::after {
	        border-left: 3px solid $color-d;
	        background-color: $color-b;
	    }
	}
	
	//卡片颜色
	.cu-card {
	    .cu-item {
			color: $color-c;
	        background-color: $color-b;
	    }
	}
	
	//选择器
	.u-select {
	    background-color: $color-b;
	    color: $color-c;
	    .select-picker-view {
	        background: linear-gradient(180deg, rgba($color: $color-b, $alpha: 0.95), rgba($color: $color-b, $alpha: 0.6)),
	            linear-gradient(0deg, rgba($color: $color-b, $alpha: 0.95), rgba($color: $color-b, $alpha: 0.6));
	        background-position: top, bottom;
	        background-size: 100% 102px;
	        background-repeat: no-repeat;
	    }
		.select-picker-indicator:after {
		    border-bottom: 1px solid $color-a;
		}
		.select-picker-indicator:before {
		    border-top: 1px solid $color-a;
		}
	} 
	
	// 开关
	.u-switch {
		background-color: $color-a;
	    .node-class {
			// 
			@extend %gradual-bg;
	    }
	}
	.u-switch--on {
		@extend %gradual-bg;
	    .node-class {
			@extend %gray-bg;
			// background-image: repeating-linear-gradient($deg, $color-a, $color-a + 10);
	    }
	}
	
	// 标题栏
	.u-navbar{
		color: $color-b;
	}
	
	// 底部菜单
	.bottom-menu{
		background-color: $color-b;
		.select{
			@extend %gradual-text;
		}
	}
	
	// cms详情
	.cms-details{
		background-color: $color-b;
	}
	
	// 标签卡
	.u-tabs {
	    .u-tabs-scroll-box {
	        .u-scroll-bar {
	            background-color: $color-b;
	        }
	    }
	}
	
	// 关闭按钮
	.u-close.m-popup{
		background-color: inherit;
	}
	
	// 底部输入框
	.bottom-input-bg{
		background-color: $color-b;
	}
}

.theme-dream-purple {
	@extend %dream-purple;
}

